<template>
  <div class="selectTargetColumn">
    <el-alert v-if="limit_num" :title="`列最大选择数量为: ${limit_num}`" :type="alertType" :closable="false" />
    <el-transfer v-model="selectedColumns" filterable :filter-method="filterMethod" filter-placeholder="请输入名称或类型"
      :titles="['可用列', '选择列']" :data="availableColumns">
      <template #default="{ option }">
        <span>
          <span style="float: left">{{ option.label }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ option.type }}</span>
        </span>
      </template>

    </el-transfer>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted} from "vue"
import { isNumber, isString, isObject } from 'src/utils/designerTool/validate'
import { ElMessage } from 'element-plus'
const props = defineProps({
  columnData: <any>[],
  params: <any>{}
})
const availableColumns = ref(<any>[])
const selectedColumns = ref(<any>[])
const limit_num = ref(0)
const alertType = ref('warning')
onMounted(() => {
  init()
})
function init() {
  availableColumns.value = props.columnData.map((row: any, index: any) => {
    return {
      key: index,
      label: row.name,
      type: row.type
    }
  })
  if (props.params.ui_config && isObject(props.params.ui_config)) {
    if (props.params.ui_config.limit_num && isNumber(props.params.ui_config.limit_num)) {
      limit_num.value = props.params.ui_config.limit_num
    }
  }
  if (props.params.data) {
    let paramsData = []
    if (props.params.value_type === 'list') {
      if (Array.isArray(props.params.data)) {
        paramsData = props.params.data
      }
    } else if (props.params.value_type === 'string' && limit_num.value === 1) {
      if (isString(props.params.data)) {
        paramsData = [props.params.data]
      }
    }
    const selectedColumns = <any>[]
    paramsData.forEach((row:any) => {
      const index = props.columnData.findIndex((columRow:any) => columRow.name === row)
      if (index !== -1) {
        selectedColumns.push(index)
      }
    })
    selectedColumns.value = selectedColumns
  }
}
function filterMethod(query: any, item: any) {
  return item.label.indexOf(query) > -1 || item.type.indexOf(query) > -1
}
function saveCommit() {
  if (limit_num.value && selectedColumns.value.length > limit_num.value) {
    ElMessage.error('已超出列最大选择数量,请检查')
    alertType.value = 'error'
    return
  } else {
    alertType.value = 'warning'
    const selectData = {
      node: [],
      form: []
    }
    selectedColumns.value.forEach((row: any) => {
      selectData.form.push(availableColumns.value[row].label)
    })
    if (props.params.value_type === 'string' && limit_num.value === 1) {
      selectData.node = selectedColumns.value.length ? availableColumns.value[selectedColumns.value[0]].label : ''
    } else {
      selectData.node = selectData.form
    }
    return selectData
  }
}
</script>

<style lang="scss" scoped>
.selectTargetColumn {
  .el-alert {
    margin-bottom: 10px;
  }

  .el-transfer {
    ::v-deep.el-checkbox:last-of-type {
      margin-right: 30px;
    }
  }
}
</style>
